<template>
  <div class="job-search-page">
    <div class="job-search">
      <div class="top-section">
        <div class="search-and-filters">
          <Search @search="handleSearch" />
          <!-- <SearchBar></SearchBar> -->
          <CitySelector />
          <!-- <FilterTags /> -->
          <FilterView />
        </div>
        <SignupForm />
      </div>
      <JobList />
    </div>
  </div>
</template>

<script setup>
import Search from '@/components/Search.vue'
import CitySelector from './components/CitySelector.vue'
// import FilterTags from './components/FilterTags.vue'
import SignupForm from './components/SignupForm.vue'
import JobList from './components/JobList.vue'
import FilterView from './components/FilterView.vue'
// import { useRoute } from 'vue-router'
import { dataCacheStore } from '@/stores'
const dataCache = dataCacheStore()
import { ref, onUnmounted } from 'vue'
import axios from 'axios' // 假设您使用axios进行API请求
import { resumeSeach } from '@/api/resume'
import { ElMessage } from 'element-plus'

const searchParams = ref({
  // 搜索参数定义
  keyword: '',
  categoryIdLv1: '',
  categoryIdLv2: '',
  categoryIdLv3: '',
  pageNo: 1,
  pageSize: 12
})
// 结果 - 列表
const searchResultData = ref([])
const count = ref(0)
// const page = ref(1)
// const route = useRoute()
const handleSearch = async (searchParams) => {
  // 处理搜索逻辑，比如路由跳转
  console.log(searchParams)

  // router.push({
  //   path: '/search',
  //   query: searchParams
  // })

  // 处理搜索逻辑，比如发起API请求
  try {
    const response = await axios.get('/api/search', { params: searchParams })
    console.log('搜索结果:', response.data)
    // 处理响应数据
  } catch (error) {
    console.error('搜索请求失败:', error)
    // 处理错误
  }
}

// 组件卸载的时候触发 - 清空搜索结果
onUnmounted(() => {
  dataCache.setSearchKey('')
  search()
})
// 搜索
async function search() {
  // 将不存在的参数干掉
  const params = JSON.stringify({ ...searchParams.value })
  await resumeSeach(JSON.parse(params))
    .then((res) => {
      if (res.code == 200) {
        searchResultData.value = res.data.list
        count.value = Number(res.data.total)
      } else {
        ElMessage({
          message: res.data.msg,
          type: 'error'
        })
      }
    })
    .catch(() => {
      ElMessage({
        message: '分类请求出错！',
        type: 'error'
      })
    })
}
</script>

<style scoped>
.job-search-page {
  background-image: linear-gradient(to bottom, #f1f6f8 0%, #eaf2f5 53%);
}
.job-search {
  font-family: Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.top-section {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.search-and-filters {
  flex-grow: 1;
}

@media (max-width: 1024px) {
  .top-section {
    flex-direction: column;
  }
}
</style>
